<.focus_box>
  <:title>
    {Phoenix.Flash.get(@flash, :login_title) || "Enter your Single Sign-On email"}
  </:title>
  <:subtitle>
    <%= if Phoenix.Flash.get(@flash, :login_instructions) do %>
      <p class="text-gray-500 mt-1 mb-2">
        {Phoenix.Flash.get(@flash, :login_instructions)}
      </p>
    <% end %>
  </:subtitle>
  <script :if={@autosubmit}>
    document.addEventListener("DOMContentLoaded", function () {
      document.getElementById("sso-login-form").submit();
    });
  </script>
  <.form :let={f} id="sso-login-form" for={@conn} action={Routes.sso_path(@conn, :login)}>
    <div class="my-4 mt-8">
      <.input
        type="email"
        autocomplete="username"
        placeholder="user@example.com"
        field={f[:email]}
      />
    </div>

    <%= if login_error = Phoenix.Flash.get(@flash, :login_error) do %>
      <div class="text-red-500 mt-4">{login_error}</div>
    <% end %>

    <.input type="hidden" field={f[:return_to]} />

    <.button class="w-full" type="submit">Sign In</.button>
  </.form>

  <:footer>
    <.focus_list>
      <:item>
        Have a standard account?
        <.styled_link href={
          Routes.auth_path(@conn, :login_form,
            return_to: @conn.params["return_to"],
            prefer: "manual"
          )
        }>
          Log in here
        </.styled_link>
        instead.
      </:item>
    </.focus_list>
  </:footer>
</.focus_box>
